\documentclass[a4paper,12pt]{article}
\usepackage[none]{hyphenat}%Para que no corte las palabras que no entran en el renglon
\usepackage[framed,numbered,autolinebreaks,useliterate]{mcode}
\usepackage{graphicx}
\usepackage{float}
\usepackage{listings}
\usepackage[utf8]{inputenc}%para mostrar bien los acentos y esas cosas

\usepackage[spanish]{babel}%para que aparesca figura en lugar de figure
\usepackage{amsmath}%para que aparesca figura 1.1 1.2 2.3 etc y para usar las formulas



%\makeatletter
%\renewcommand\@seccntformat[1]{}%para que no aparesca el numero de la seccion en el texto
%\makeatother

\usepackage{tocloft}
\renewcommand{\cftsecleader}{\cftdotfill{\cftdotsep}}%para que el indice tenga los puntos



\begin{document}

     
      \begin{titlepage}

	  \newcommand{\HRule}{\rule{\linewidth}{0.5mm}} % Defines a new command for the horizontal lines, change thickness here
	  \center % Center everything on the page

	  %	HEADING SECTIONS
	  \textsc{\LARGE Facultad de Ingeniería}\\[0.4cm] % Name of your university/college
	  \textsc{\LARGE Universidad de Buenos Aires}\\[1.0cm] % Name of your university/college
	  \textsc{\Large Taller de programación [75.42]}\\[0.5cm] % Major heading such as course name

	  %	TITLE SECTION
	  \HRule \\[0.4cm]
	  { \Large \bfseries Editor de diagramas ER y Clases}\\[0.8cm] % Title of your document
	  { \Large \bfseries Manual de usuario}\\[0.4cm] % Title of your document
	  \HRule \\[1cm]
	  
	  %	AUTHOR SECTION
	  \begin{minipage}{0.55\textwidth}
	      \begin{flushleft} \large
		  \emph{Autores:}\\
		  Linardos Leandro (89567)\\
		  Luna Riveros Santiago (88710)\\
		  Marchese Juan Ignacio (85719)\\
		  Quinteros Aguilar Mirian (89875)\\
	      \end{flushleft}
	  \end{minipage}
	  ~%el moño hace que se separen las secciones de autor y curso
	  \begin{minipage}{0.4\textwidth}
	      \begin{flushright} \large
		  \emph{Grupo:} \\
		  No hay consenso \\
		  
		  \emph{Coordina:} \\
		  Alejandro Ferrer \\
	      \end{flushright}
	  \end{minipage}\\[1cm]

	  %	DATE SECTION
	  {\large 1er Cuatrimestre 2013}\\[1cm]

	  %	LOGO SECTION
	  \includegraphics{./Imagenes/Logo-fiuba_big.png}\\[1cm]

	  \vfill % Fill the rest of the page with whitespace

      \end{titlepage}
      
      
%-------------------------------------------------------------------------------------------------------------
      \tableofcontents
      \setcounter{tocdepth}{2}
      \newpage
      
      
      
%-------------------------------------------------------------------------------------------------------------      
    \section{Instalación}
	\subsection{Requerimientos de software}
	
	    La aplicación fue desarrollada para correr en distribuciones basadas en GNU\/Linux. Para instalar el programa se debe contar con las librerias gtkmm-2.4 y libxml-2.6. o versiones posteriores. Además se debe contar con el programa make y el g++ (utilizado por el anterior), para compilar la aplicación.

	\subsection{Requerimientos de hardware}
	    Se necesita al menos (aproximadamente) las siguientes prestaciones:

	    500 Mhz de procesador.
	    128 Mb de memoria RAM.

	\subsection{Proceso de compilación}

	    Colocar el archivo EditorDeDiagramas.tar.gz en algún directorio del sistema y descomprimirlo. Luego hay que posicionarse dentro del directorio donde se descomprimieron los archivos, y ejecutar el comando:

	    \begin{lstlisting}
		make release
	    \end{lstlisting}
	    Una vez terminado dicho proceso, se puede ir al directorio EditorDeDiagramas y correr la aplicación que se encuentra en la carpeta release.

%-------------------------------------------------------------------------------------------------------------      
    \section{Ejecución de la aplicación}
	Para ejecutar el programa hay que ir a la carpeta release y ejecutar el siguiente comando:
	\begin{lstlisting}
	    ./gui
	\end{lstlisting}

%-------------------------------------------------------------------------------------------------------------      
    \section{Configuración}
	Al ejecutar el makefile, ya se configuran las variables y directorios de los ejecutables y datos necesarios para correr el programa.
%-------------------------------------------------------------------------------------------------------------      
    \section{Forma de uso}
	En los siguientes apartados se explica cómo utilizar las distintas funcionalidades que provee la aplicación.

	\subsection{Menú principal}

	    Esta sección es la que nos va a permitir hacer todo tipo de acciones sobre el diagrama.

		\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.4\textwidth]{./Imagenes/Programa/BarraTitulo.png}
	    	\caption{Barra de menú}
	    \end{figure}

	    La barra de menú principal cuenta con: File, Edit, Options y Help. La primera opción File cuenta con lo básico de cualquier aplicación, crear, abrir, guardar, etc. La segunda Edit es la que permite Copiar, Cortar, Borrar, Crear Subdiagrama y Exportar Subdiagrama; todas estas funcionan luego de haber seleccionado uno o varios elementos.

	    La tercera opción Options cuenta con Propiedades que es lo mismo que hacer click derecho sobre el elemento y entrar a sus propiedades; y con Validate, que se encarga de validar el diagrama.

	    Finalmente se encuentra Help, el cual tiene el Acerca De... que es donde se puede ver información de la versión del trabajo y los creadores; y por debajo tenemos Help que abrirá este manual de usuario.

	\subsection{Barras de la aplicación}
	
			\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=1\textwidth]{./Imagenes/Programa/BarraHerramientas.png}
	    	\caption{Barra de aplicación}
	    \end{figure}

	    \subsubsection{Barra de Herramientas}
		Dicha barra posee las siguientes opciones de izquierda a derecha: New project, Open project, Save diagram, Print diagram, Copy, Cut, Delete, Properties, Create Subdiagram, Export Subdiagram, Validate, Help.

		Esta barra de herramientas no cambia visualmente si se trata de un diagrama ER o de clases. Sin embargo, su comportamiento podría variar de acuerdo al tipo de diagrama que esté activo.
	    \subsubsection{Barra de Componentes}
	    
		\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.2\textwidth]{./Imagenes/Programa/BarraHerramientasDerechaClases.png}
	    	\caption{Barra de Herramientas para diagramas de Clases}
	    \end{figure}
	    
	    \begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.2\textwidth]{./Imagenes/Programa/BarraHerramientasDerechaDER.png}
	    	\caption{Barra de Herramientas para diagramas de DER}
	    \end{figure}
	    
		Estas dos barras de herramientas permiten elegir el componente a crear, para luego arrastrarlo sobre el área de dibujo y ubicarlo en la posición deseada (soltando click del mouse). Dependiendo del tipo de diagrama que se esté editando, las mismas se ubican del lado derecho del área de dibujo.	


	\subsection{Creación de un diagrama}

	    Al ejecutar el programa de la forma anteriormente señalada, se abre una ventana donde tenemos la posibilidad mediante el Menú Principal de elegir la opción Nuevo proyecto (New Project), luego tendremos la posibilidad de elegir un nombre para el proyecto actual, una vez establecido el mismo, podremos crear nuevos diagramas ya sean de Clases o DER, con la opción del Menú Principal de Nuevo Diagrama (New Diagram). Para cada nuevo diagrama creado se podrá seleccionar un nombre para el mismo.
	    
	    \begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.5\textwidth]{./Imagenes/Programa/MenuFile.png}
	    	\caption{Menú Principal}
	    \end{figure}
	    
	   	\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.3\textwidth]{./Imagenes/Programa/NombreNuevoProyecto.png}
	    	\caption{Ventana de configuración de nombre del nuevo proyecto}
	    \end{figure}
	    
	    \begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.3\textwidth]{./Imagenes/Programa/NombreNuevoDiagrama.png}
	    	\caption{Ventana de configuración de nombre del nuevo diagrama, con la opción del tipo de diagrama a crear}
	    \end{figure}
	    
	    \begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.7\textwidth]{./Imagenes/Programa/NuevoDiagramaClases.png}
	    	\caption{Ventana con nuevo diagrama de Clases}
	    \end{figure}
	    
	    \begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.7\textwidth]{./Imagenes/Programa/NuevoDiagramaDER.png}
	    	\caption{Ventana con nuevo diagrama DER}
	    \end{figure}
	    
	   	\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.7\textwidth]{./Imagenes/Programa/ComponentesDER.png}
	    	\caption{Componentes DER}
	    \end{figure}

	    \newpage
	    Una vez hecho esto, vamos a poder utilizar la Barra de Componentes sobre nuestro diagrama. Sobre esta área recientemente creada podemos agregar los distintos elementos que integran un diagrama. Para crear un elemento vamos a utilizar la Barra de Componentes en la cual se debe clickear sobre el botón correspondiente haciendo click o arrastrándolo hacia la posición deseada. Los elementos disponibles en la Barra de Componentes son los mostrados anteriormente, solo se mostrarán los componentes válidos según el tipo de diagrama seleccionado.

	    \subsubsection{Propiedades de los elementos}

		Cada elemento dentro de la lógica del diagrama tiene funciones particulares que son propias del mismo, cada elemento cuenta con un menú en el cual se pueden modificar sus propiedades. Dicho menú de propiedades es accedido utilizando click derecho sobre los componentes.

		A continuación mostraremos las propiedades de cada uno de los componentes de los diagramas de entidad relación:

		\begin{itemize}
		    \item Entidad
			\begin{enumerate}
			    \item Nombre del componente
			    \item Tipos: permite configurar el tipo de entidad que ingresamos en el diagrama para indicar como se relaciona con las demás entidades.
			\end{enumerate}
			
	   	\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.4\textwidth]{./Imagenes/Programa/PropiedadesEntidades.png}
	    	\caption{Propiedades de las Entidades}
	    \end{figure}
			
		    \item Relación
			\begin{enumerate}
			    \item Nombre del componente
			    \item Tipos: permite elegir el tipo de relación que va a unir a dos entidades.
			\end{enumerate}
			
	   	\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.4\textwidth]{./Imagenes/Programa/PropiedadesRelaciones.png}
	    	\caption{Propiedades de las Relaciones}
	    \end{figure}			
			
		    \item Atributo
			\begin{enumerate}
			    \item Nombre del atributo
			    \item Tipos: opciones que permiten elegir el tipo de atributo que ingresamos en el diagrama. Puede ser multivaluado o derivado (por copia o cálculo) y, a su vez, puede determinarse si forma parte de un identificador. Las opciones de identificadores no son excluyentes, ya que podrá darse el caso en el que un atributo forme parte de mas de un identificador.
			    
	   	\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.4\textwidth]{./Imagenes/Programa/PropiedadesAtributos.png}
	    	\caption{Propiedades de los Atributos}
	    \end{figure}
	    
			    \item Expresion: Agrega el texto debajo del atributo correspondiente a la expresión del mismo. Este es el caso de un atributo derivado y calculado a partir de otros atributos, por ejemplo.
			\end{enumerate}
	    \newpage
		    \item Atributo Compuesto
			\begin{enumerate}
			    \item Nombre del atributo
			    \item Tipos: opciones que permiten elegir el tipo de atributo que ingresamos en el diagrama. Puede ser multivaluado o derivado (por copia o cálculo) y, a su vez, puede determinarse si forma parte de un identificador. Las opciones de identificadores no son excluyentes, ya que podrá darse el caso en el que un atributo forme parte de mas de un identificador
			    \item Expresion: Agrega el texto debajo del atributo correspondiente a la expresión del mismo. Este es el caso de un atributo derivado y calculado a partir de otros atributos, por ejemplo. Como es un atributo compuesto, se le pueden conectar atributos (compuestos o no) al mismo; creando las vias como cualquier otro elemento.
			\end{enumerate}
			
		    \item Jerarquía
			\begin{enumerate}
			    \item Nombre del componente: si se modifica el nombre, aparecerá la leyenda sobre el dibujo del elemento.
			    \item Tipos: opciones que permiten elegir entre una generalización o especialización de entidades.
			\end{enumerate}
			
	   	\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.4\textwidth]{./Imagenes/Programa/PropiedadesJerarquias.png}
	    	\caption{Propiedades de las Jerarquías}
	    \end{figure}
			
		    \item Via con Cardinalidades
			\begin{enumerate}
			    \item Nombre del componente: si se modifica el nombre, aparecerá la leyenda sobre el dibujo del elemento. Corresponde al rol en el caso de una via que conecta una relación con una entidad.
			    \item Tipos: opciones que permiten elegir entre distintos tipos de cardinalidades para relacionar entidades.
			\end{enumerate}
		\end{itemize}
		
		\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.6\textwidth]{./Imagenes/Programa/PropiedadesTiposDeRol.png}
	    	\caption{Propiedades de los tipos de rol en las relaciones}
	    \end{figure}
		

		En los diagramas de clases las propiedades que se pueden editar de la clase son las siguientes:
		
		\begin{itemize}
		    \item Clase
			\begin{enumerate}
			    \item Nombre de la clase
			    \item Tipos: Normal, abstracta o interfaz
			\end{enumerate}
			
		\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.4\textwidth]{./Imagenes/Programa/PropiedadesClases.png}
	    	\caption{Propiedades de las Clases}
	    \end{figure}
			
		    \item Atributos
			\begin{enumerate}
			    \item Nombre del atributo
			    \item Tipo de dato devuelto
			    \item Valor por defecto
			    \item Visibilidad
			\end{enumerate}
			
		\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.4\textwidth]{./Imagenes/Programa/PropiedadesClases_Atributos.png}
	    	\caption{Propiedades de las Clases - Atributos}
	    \end{figure}
			
		    \item Métodos
			\begin{enumerate}
			    \item Nombre del método
			    \item Tipo de dato devuelto
			    \item Visibilidad
			    \item Lista de parámetros: de cada parámetro se puede especificar el nombre, el tipo de dato y el valor por defecto
			\end{enumerate}
			
		\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.4\textwidth]{./Imagenes/Programa/PropiedadesClases_Metodos.png}
	    	\caption{Propiedades de las Clases - Métodos}
	    \end{figure}
			
		\end{itemize}


	    \subsubsection{Conexión entre elementos}
		Para conectar dos elementos entre si, se debe clickear sobre uno de ellos y manteniendo apretado el click, arrastrar el cursor hasta el otro elemento que se quiere relacionar. Cuando se esta dibujando de esta manera la línea, se pinta de color verde el contorno del elemento por el cual pasa el cursor, con el fin de facilitar la conexión del mismo con la línea. Se va a lograr una conexión exitosa cuando se suelte el click sobre el borde del elemento (el cursor se convierte en una mano para indicar esto). Si se suelta el click del mouse durante la conexión fuera de un elemento, no se crea la línea ya que no se permiten líneas sin conectar.
		
		\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.6\textwidth]{./Imagenes/Programa/ConexionEntreElementos.png}
	    	\caption{Conexión entre elementos - DER}
	    \end{figure}
	    
En el caso de los diagramas de clase, cada una de las líneas representa el tipo de relación entre clases, ya sea de asociación, agregación, composición, herencia y dependencia. Para seleccionar el tipo de relación, primero se debe seleccionar de la barra izquierda el tipo de relación que se desea crear y luego conectar los componentes que se desea relacionar entre sí.
	    
		\begin{figure}[H]
			\centering
	    	\numberwithin{figure}{section}
	    	\includegraphics[width=0.6\textwidth]{./Imagenes/Programa/ConexionEntreElementosClases.png}
	    	\caption{Conexión entre Clases - Asociación}
	    \end{figure}

	    \subsubsection{Edición de líneas}
		Las líneas están conformadas por al menos tres segmentos entre horizontales y verticales, y es posible modificar el trazado de los mismos. Para ello se debe clickear sobre el segmento a editar y arrastrarlo hasta la posición deseada. Al posicionar el cursor sobre algún segmento, la línea cambia de color y el cursor cambia de estado indicando una posible edición del trazado. Mientras se esta moviendo un segmento, se crearán los segmentos necesarios para mantener los segmentos ortogonales entre si. Dos segmentos se unen automáticamente cuando existe un tercero entre ellos de escasa longitud.

	\subsection{Abrir y guardar diagramas}
	    Para guardar un diagrama se puede hacer click en la Barra de Herramientas o acceder desde el Menú Principal dentro de File en la opción SaveDiagram. Para abrir se procede de la misma forma pero utilizando la opción Open. Al guardar un diagrama se generarán dos archivos: uno con el postfijo -comp y otro con el postfijo -rep. A la hora de abrir un diagrama se debe abrir desde el archivo -rep.

	En caso de que se desee abrir un proyecto que incluya más de un diagrama, alcanza con seleccionar la carpeta cuyo nombre corresponde al nombre del proyecto y se abrirán todos los diagramas incluidos.

	\subsection{Impresión de diagramas}
	    La aplicación ofrece distintas formas de presentar un diagrama, accediéndolas desde el menú File/Archivo:
	    
	    \begin{itemize}
		\item Vista previa: permite la previsualización del diagrama antes de la impresión del mismo.
		\item Impresión: Es posible elegir la configuración de página utilizando la opción Propiedades en el menú file.
		\item Exportar a PDF
		\item Exportar a PNG
	    \end{itemize}
	    \newpage
	\subsection{Propiedades y edición de elementos}
	    En todas estas acciones las conexiones se mantienen intactas y las líneas siguen a sus conectores. Además se pueden aplicar las siguientes acciones a un grupo de elementos seleccionados previamente:
	    
	    \begin{enumerate}
		\item Copiar
		\item Cortar
		\item Borrar
		\item Crear Subdiagrama
		\item Exportar Subdiagrama
	    \end{enumerate}

	    Al momento de copiar o cortar varios elementos, se mantienen las líneas que conectan elementos de la selección, mientras que se desconectan las lineas que conectan algun elemento que no este seleccionado. Cuando se borra una selección también se eliminan todas las líneas que se encuentren conectadas a los elementos de la misma. Cuando se mueve una selección las líneas siguen a sus conectores, realizando automáticamente un nuevo trazado de ser necesario.

	    
	\subsection{Validación de un diagrama}

	    El proceso de validación es el encargado de ver sobre todos los elementos del diagrama la completitud del diseño en cada uno de los componentes. Para poder validar un diagrama se puede ir desde el botón que se encuentra en la Barra de Herramientas o desde el Menú Principal dentro de Options, la opción Validate. Al proceder a validar un diagrama la aplicación nos va a sugerir un nombre para el archivo a generar (.html) el cual contendrá la información del resultado de la validación.
		

	\subsection{Conversión}
		El proceso de conversión es el encargado de generar un diagrama de clases mapeando los componentes de un diagrama DER. Desde el botón ubicado en la Barra de Herramientas podemos convertir un diagrama de clases. Al finalizar la conversión, el nuevo diagrama de clases es mostrado en una nueva pestaña.




\end{document}
